<template>
    <div>
        <div class="carousel">
            <template>
                <el-carousel indicator-position="outside">
                    <el-carousel-item v-for="(item, index) in images" :key="index" class="carousel-images">
                        <img :src="item.url" alt="image">
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
    
        <div id="main_html">
            <button @click="goPets()" class="big-button">宠物仓库</button>
            <button @click="goNotices()" class="big-button">公告栏</button>
            <button @click="goAdoptions()" class="big-button">
                领养管理
                <b style="color: red" v-show="(this.user.type!=1)?false:(this.isFinished>=1)?true:false">
                    *
                </b>
            </button>
            <button @click="goUsers()" class="big-button">账号信息</button>
            <button @click="goOut()" class="big-button">退出</button>
        </div>
    </div>


</template>

<script>
import axios from 'axios';

export default {
name: "First",
data(){
    return{
        ado:[],
        isFinished:0,
        user:'',
        images: [
        { url: 'https://www.bobocw.com/uploads/202206/24/220624101014885.jpg' },
        { url: 'https://www.bobocw.com/uploads/202206/24/220624094232757.jpg' },
        { url: 'https://img.zcool.cn/community/0155ef6070533811013e87f45ae247.jpg@1280w_1l_2o_100sh.jpg' },
        // 可以根据需要添加更多的图片对象
      ]
    }
},
created() {
    this.load();
    this.initUser();

    
},
mounted(){

},

methods:{
        load(){
            var param=new URLSearchParams();
            param.append("page",1);
            param.append("size",1000);
            axios({
                url:"http://localhost:8080/adoption/adoGet",
                method:"get",
                params:param
            }).then(res=>{
                
                this.ado=res.data.records;
                var i;
                for(i=0;i<this.ado.length;i++){
                    if(this.ado[i].adostatus===1){
                        this.isFinished=1;
                    }
                }
            })
        },
        initUser(){
			    var user=JSON.parse(sessionStorage.getItem("loginUser"));
			    if(user==null){
				    this.$message.warning("请先登录");
				    this.$router.push("/");
			    }else{
				    this.user=user;
			    }
					
	    },
        goPets(){
            this.$router.push("/Manage/pethouse");
        },
        goAdoptions(){
            if(this.user.type==1){
                this.$router.push("/Manage/adoption");
            }else{
                this.$router.push("/Manage/adorecord");
            }
            
        },
        goNotices(){
            this.$router.push("/Manage/noticeboard");
        },
        goUsers(){
            this.$router.push("/Manage/person");
        },
        goOut(){
            this.$alert('已退出登录');
            this.$router.push("/");
        }
        
	
    }
}
</script>

<style>
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background-color: #faecd8;
}

#main_html {

    text-align: center;
    margin-top: 30px;
}
header {
    background-color: #e6b264;

}

.logo {
    font-size: 24px;
    font-weight: bold;
}



.carousel {
    height: 150%;
    position: relative;
    overflow: hidden;
    padding-top: 50px;
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
    
}

.carousel-images img {
    width: 100%;
    flex-shrink: 0;
    height: 100%;
    
}
.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active {
    background-color: #717171;
}
.active, .dot:hover {
    background-color: #717171;
}

.big-button {
    display: inline-block;
    margin: 10px;
    padding: 15px 30px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #fff;
    background-color: #f3d19e;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
}

.big-button:hover {background-color: #cf9236}

.big-button:active {
    background-color: #cf9236;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

</style>
